<template>
    <view>
        <view class="cjOrderList" v-for="item  in orderData" :key="id" >
            <view class="cjOrderTitle">
                <view>{{item.name}}</view>
                <view class="cjFinish">交易完成</view>
            </view>
            <view class="cjContent">
                <view class="cjImg">
                    <image :src="item.imgSrc" v-model="scaleToFill" class="cjImg_img"></image>
                </view>
                <view class="cjRemarkF">
                    <view class="cjRemark">{{item.remark}}</view>
                    <view class="priceBox">
                        <view class="cjText">单价：<text class="cjFinish">{{item.price}}</text></view>
                        <view class="cjText">数量：<text class="cjFinish">{{item.num}}</text></view>
                        <view class="cjText">总价：<text class="cjFinish">{{item.totalPrice}}</text></view>
                    </view>
                </view>
            </view>
        </view>
        <view class="cjOrderList1" v-for="item  in orderData1 " :key="orderNum">
            <view class="content2">喜茶积分：<text class="content1">{{item.integral}}</text></view>
            <view class="content2">订单编号：<text class="content1">{{item.orderNum}}</text></view>
            <view class="content2">创建时间：<text class="content1">{{item.createTime}}</text></view>
            <view class="content2">付款时间：<text class="content1">{{item.payTime}}</text></view>
            <view class="content2">配送方式：<text class="content1">{{item.state}}</text></view>
        </view>
    </view>

</template>

<script>
    export default {
        name: "dingdanDetails",
        data(){
            return{
                orderData:[
                        {id:'001',name:'蔡徐坤奶茶',imgSrc:'http://101.37.175.158:8888/images/dd1.jpg',state:'交易完成',number:'2',price:'11',count:'22',remark:'冷萃茶不用等待叫号，可直接向电源出示后领取。细嫩茶芽与桂花一同于冷露舒展沐浴八小时，制的茶汤青黄透亮，滋味鲜美'},
                ],
                orderData1:[
                    {integral:'获得50积分',orderNum:'202004181003',createTime:'2020-4-18 15:25:26',payTime:'2020-4-18 15:26:13',state:'自取'}
                ]
            }
        }
    }
</script>

<style scoped>
    .cjOrder{
        background-color: rgba(248, 248, 248, 0.44);
    }
    .cjOrderList{
        margin: 10rpx;
        padding: 10rpx;
        width: 95%;
        height: 300rpx;
        background-color: #f8f8f8;
        display: flex;
        flex-direction: column;
    }
    .cjOrderList1{
        margin: 10rpx;
        padding: 10rpx;
        width: 95%;
        height: 245rpx;
        background-color: #f8f8f8;
        display: flex;
        flex-direction: column;
    }
    .cjOrderTitle{
        padding: 0 20rpx;
        margin-top: 10rpx;
        width: 95%;
        display: flex;
        justify-content: space-between;
    }
    .cjImg{
        height: 200rpx;
        width: 200rpx;
        background-color: cornflowerblue;
    }
    .cjImg_img{
        width: 100%;
        height: 100%;
    }
    .cjContent{
        margin-top: 20rpx;
        padding: 0 20rpx;
        width: 95%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .cjText{
        font-size: 27rpx;
    }
    .cjFinish{
        color: red;
    }
    .cjRemark{
        width: 100%;
        height: 50rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 25rpx;
        color: rgb(139, 139, 139);
    }
    .priceBox{
        margin-top: 50rpx;
        margin-left: 330rpx;
    }
    .cjRemarkF{
        width: 450rpx;
    }
    .content1{
        margin-left: 150rpx;
        font-size: 25rpx;
        color: #bcc1c5;
    }
    .content2{
        margin-top: 10rpx;
        font-size: 27rpx;
        margin-left: 10rpx;
    }
</style>